<template>
    <div class="loginBar">
        <form>
            <div class="input-bar-item">
                <div class="label phone-label">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoujihao"></use>
                    </svg>
                    <span>手机号码</span>
                </div>
                <div class="input-bar">
                    <input type="number" name="mobile" placeholder="请输入账号/手机号" v-model="formData.mobile" data-vv-as="手机号" v-validate="'required|mobile'" @input="isGiveWayMobile=true">
                    <p role="alert" v-show="errors.has('mobile') || !isGiveWayMobile" class="toast-text-style">
                        <svg class="icon" v-show="true" aria-hidden="true">
                            <use xlink:href="#icon-gantanhao"></use>
                        </svg>
                        {{ errors.first('mobile') }}
                        {{ !isGiveWayMobile ? '该手机号未注册' : '' }}
                    </p>
                    <div class="font-item">
                        <svg class="icon" v-show="false" aria-hidden="true">
                            <use xlink:href="#icon-qingchu"></use>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="input-bar-item">
                <div class="label">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mima"></use>
                    </svg>
                    <span>密码</span>
                </div>
                <div class="input-bar">
                    <input type="password" name="password" v-model="formData.password" v-validate="'required|min:8|max:20'"  placeholder="请输入密码" @input="isGiveWayPassword=true">
                    <p role="alert" v-show="errors.has('password') || !isGiveWayPassword" class="toast-text-style">
<!--                    <p class="toast-text-style" v-show="!isGiveWay">-->
                        <svg class="icon" v-show="true" aria-hidden="true">
                            <use xlink:href="#icon-gantanhao"></use>
                        </svg>
                        {{ errors.first('password') }}
                        {{ !isGiveWayPassword ? '您输入的账号和密码不匹配' : '' }}
                    </p>
                    <div class="font-item">
                        <svg class="icon" v-show="true" aria-hidden="true">
                            <use xlink:href="#icon-qingchu"></use>
                        </svg>
                        <svg class="icon xianshi" v-show="true" aria-hidden="true">
                            <use xlink:href="#icon-guanbixianshi"></use>
                        </svg>
                    </div>
                </div>
            </div>
        </form>
        <btn @handleSubmit="handleSubmit" v-bind:user="user">立即登录</btn>
        <slot></slot>
    </div>
</template>

<script>
    // 使用用户名密码登录
    // 按钮组件
    import btn from "@/components/btn/btn";
    export default {
        name: "normalLogin",
        data() {
            return {
                formData: {
                    mobile: '',  // 手机号
                    password: ''  // 密码
                },

                // 验证是否通过 用于提交表单的时候可能有密码或用户名没输入正确的情况下给予的错误提示
                // 默认为 true  为 true 时就不显示错误提示， isGiveWayMobile 和 isGiveWayPassword 主要只用于在提交表单的时候
                // 判断用户是否输入有误，平时就不要让它错误提示高亮
                isGiveWayMobile: true,  //  手机号码是否已经注册过
                isGiveWayPassword: true  // 密码是否正确

            }
        },
        methods: {
             /*
             登录提交
             */
            handleSubmit() {
                this.$validator.validate()
                    .then((valid) => {
                        // 规则限制验证成功
                        if (valid) {
                            // 判断账号 密码是否正确
                            const isMobile = this.formData.mobile === this.$store.state.mobile
                            const isPassword = this.formData.password === this.$store.state.password

                            // 用户名未注册
                            if (!isMobile) {
                                this.isGiveWayMobile = false
                            }
                            // 密码输入错误
                            else if (!isPassword) {
                                this.isGiveWayPassword = false
                            } else {
                                // 登录成功
                                this.$router.replace({
                                    path: '/home',
                                    name: 'home'
                                })
                            }
                        }
                    })
            }
        },
        computed: {
            // 监听手机号输入是否为空， 为空时提交按钮将不能被点击
          user: function () {
              return !this.formData.mobile
          }
        },
        components: {
            btn
        }
    }
</script>

<style lang="scss" scoped>
    .loginBar {
        form {

        }
    }
</style>